import createApp from "./app.js";

export default (ctx) => {
  let url = ctx.url;
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp();
    // console.log("url===========", url);
    router.push(url); // 服务端跳转页面

    // 使用 onReady 表示组件已经加载完成，防止有异步组件没有加载完成;
    // onReady 的两个参数分别为成功和失败的回调;
    router.onReady(() => {
      // 查找与路径匹配的组件, 如果没有就得到一个空数组;
      const matchComponents = router.getMatchedComponents();

      // 如果没有匹配的组件，就给客户端返回一个 404;
      if (!matchComponents.length) {
        return reject({ code: 404 });
      }

      // nuxt.js 中此方法名为 asyncData，实际可以随意命名, 只要两端统一就可以;
      // 正常情况下是一个组件，也有可能是多个组件，所以用 map
      Promise.all(
        matchComponents.map((component) => {
          if (component.asyncData) {
            return component.asyncData(store);
          }
        })
      ).then(() => {
        ctx.state = store.state; // 将服务端得到的最新 state 注入返还给客户端
        resolve(app);
      });
    }, reject);
  });
};
